import React from 'react';
import { Box, Grid } from '@mui/material';
import { useDarkMode } from 'contexts/DarkMode';
import AdaptiveLayout from 'components/elements/AdaptiveLayout';
import ReferralActionButtons from 'components/ecosystems/ReferralActionButtons';
import SliderInfo from 'components/electrons/SliderInfo';
import IOSAppStoreCard from 'components/ui/IOSAppStoreCard';
import backgroundImage1 from 'images/background1.jpeg';
import backgroundImage2 from 'images/background2.jpeg';
import backgroundImage3 from 'images/background3.jpeg';
import backgroundImage4 from 'images/background4.jpeg';

const HomePage = () => {
  const { darkMode } = useDarkMode();
  
  return (
    <Box sx={{ width: '100%' }}>
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={false}
      >
        <ReferralActionButtons 
          referralLink="premierproperties4you.com"
          showLeaderTextAlways={true}
          fontSize="1.1rem"
          buttonSize="1rem"
          color="primary.main"
        />
      </AdaptiveLayout>
      
      {/* 2x2 Grid of IOSAppStoreCards */}
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={1}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <Grid container spacing={0.5} sx={{ maxWidth: '600px' }}>
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage4}
                title="Featured Property"
                subtitle="Premium location"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage3}
                title="Modern Design"
                subtitle="Urban living"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage2}
                title="Classic Home"
                subtitle="Family friendly"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage1}
                title="Luxury Villa"
                subtitle="Exclusive offer"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
        </Grid>
      </AdaptiveLayout>
      
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <SliderInfo 
          darkMode={darkMode}
          sliderWidth={120}
        />
      </AdaptiveLayout>
    </Box>
  );
};

export default HomePage;